<!--  -->
<template>
  <div class="size-full">
    <div class="size-full grid grid-cols-5">
      <div class="col-span-2 flex flex-col justify-around size-full pb-2 px-5">
        <div v-for="(item, index) in tabs" :key="index" class="text-center tab-item">
          <div class="truncate px-2">{{ item.label }}</div>
          <div class="" :style="{ color: colorList[index] }">
            <NumberGrowWarp :value="item.value"></NumberGrowWarp>
          </div>
        </div>
      </div>
      <div class="col-span-3 size-full" ref="ChartRight1"></div>
    </div>
    <DialogBox
      title="本年度政务服务事项部门统计"
      :show="showDialog"
      @close="showDialog = false"
      @opened="initDetail"
    >
      <DivideSelector
        :list="BtnList"
        @change="changeDetailTab"
        :gridNum="11"
        :activeIndex="detailActiveLabel"
      ></DivideSelector>
      <div ref="detailChartRight1" class="h-[522px]"></div>
      <div
        class="absolute top-0 left-0 flex justify-center items-center size-full pointer-events-none"
      >
        <el-empty description="没有数据" v-if="detailList == 0" />
      </div>
    </DialogBox>
  </div>
</template>

<script setup lang="ts">
import { requestApi } from '@/api'
import DialogBox from '@/components/box/DialogBox.vue'
import DivideSelector from '@/components/left/Inner/components/DivideSelector.vue'
import NumberGrowWarp from '@/components/number-grow-warp/NumberGrowWarp.vue'
import { defaultTooltipStyle, useEcharts } from '@/util/e-chart'
import type { EChartsCoreOption, EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const showDialog = ref(false)

const ChartRight1 = ref<HTMLElement>()
const initMainChart = () => {
  requestApi.GetXzxkPercent().then((res) => {
    const Data = getMainOption(res) as any
    new useEcharts(ChartRight1.value!, Data, (data) => {
      console.log(data)
      detailActiveLabel.value = BtnList.value.find((e) => e.label == data.name)?.value
      initTable()
    })
  })
}
const detailActiveLabel = ref()
const initTable = () => {
  showDialog.value = true
}
const getMainOption = (indicator: { percent: string; shenpilb: string }[]): EChartsCoreOption => {
  var colorArr = [
    '#3ac5ff',
    '#55e492',
    '#02fff6',
    '#5d8dd5',
    '#aa7bd3',
    '#f08e48',
    '#f5be52',
    '#a2ce3c'
  ]
  return {
    tooltip: {
      trigger: 'item',
      // formatter: '{a} <br/>{b}: {c} ({d}%)',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      ...defaultTooltipStyle
    },
    color: colorArr,
    series: [
      {
        name: '政务服务事项占比',
        type: 'pie',
        radius: [35, 60],
        center: ['50%', '50%'],
        label: {
          formatter: '{b|{b}} \n {per|{d}%} ',
          backgroundColor: 'rgba(255, 147, 38, 0)',
          borderColor: 'transparent',
          borderRadius: 4,
          rich: {
            b: {
              color: '#b3e5ff',
              fontSize: 16
            },
            c: {
              fontSize: 14,
              color: '#eee'
            },
            per: {
              color: '#FDF44E',
              fontSize: 14,
              padding: [4, 0]
            }
          },
          color: '#fff',
          fontSize: 16
        },
        data: indicator.map((e) => {
          return {
            name: BtnList.value.find((itm) => itm.value == e.shenpilb)?.label,
            value: parseFloat(e.percent)
          }
        })
      }
    ]
  }
}
onMounted(() => {
  initMainChart()
  initNumbers()
})

const colorList = ref(['#00FFF4', '#F6BF53', '#53BFF9'])
const tabs = ref([
  { label: '政务服务事项总数', value: 0 },
  { label: '即办件', value: 0 },
  { label: '承诺件', value: 0 }
])
const initNumbers = () => {
  requestApi.GetTaskNum().then((res) => {
    tabs.value[0].value = res.total_num
    tabs.value[1].value = res.prompt_num
    tabs.value[2].value = res.promise_num
  })
}
//弹窗内逻辑
const detailChartRight1 = ref<HTMLElement>()
const BtnList = ref([
  { label: '行政许可', value: '01' },
  { label: '行政处罚', value: '02' },
  { label: '行政强制', value: '03' },
  { label: '行政征收', value: '04' },
  { label: '行政给付', value: '05' },
  { label: '行政检查', value: '06' },
  { label: '行政确认', value: '07' },
  { label: '行政奖励', value: '08' },
  { label: '行政裁决', value: '09' },
  { label: '其他行政权力', value: '10' },
  { label: '公共服务', value: '20' }
])
const detailList = ref(0)
const initDetail = () => {
  requestApi.GetTaskByShenpilb(activeDetailTab.value).then((res) => {
    detailList.value = res.datacount
    let xAxis: string[] = []
    let percentList: number[] = []
    let numList: number[] = []
    res.datalist.forEach((item) => {
      xAxis.push(item.ouname)
      percentList.push(parseFloat(item.percent) * 100)
      numList.push(item.num)
    })
    const Data = getDetailOptions(xAxis, numList, percentList)
    new useEcharts(detailChartRight1.value!, Data, (data) => {
      console.log(data.value)
    })
  })
}
const getDetailOptions = (
  xAxis: string[],
  numberList: number[],
  percentList: number[]
): EChartsOption => {
  var clientWidth = detailChartRight1.value!.clientWidth
  return {
    color: ['#3A84D6', '#25D8DC', '#F2C96F', '#52D98B'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      ...defaultTooltipStyle
    },
    legend: {
      top: 10,
      textStyle: {
        color: '#FFF', // 字体颜色
        fontSize: 12 // 字体大小
      }
    },
    grid: {
      left: 50,
      right: 60,
      bottom: xAxis.length > 8 ? 200 : 50,
      top: 50
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: {
          color: '#7EB2E0', // 字体颜色
          fontSize: 12, // 字体大小
          padding: [0, 0, 0, 0], // 与轴线的间距 [上, 右, 下, 左]
          width: xAxis.length > 8 ? 20 : 120,
          overflow: 'break',
          align: 'center',
          interval: 0 //使x轴文字显示
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: xAxis
      },
      {
        type: 'value',
        max: clientWidth,
        show: false
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '交易数（个）',
        nameTextStyle: {
          color: '#7EB2E0', // 设置名称字体颜色
          fontSize: 14 // 设置名称字体大小
        },
        axisLabel: {
          color: '#7EB2E0', // 设置字体颜色
          fontSize: 14 // 设置字体大小
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#0A375D',
            width: 2 // 虚线宽度
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      {
        type: 'value',
        name: '占比(%)',
        position: 'right',
        interval: 10,
        nameTextStyle: {
          color: '#7EB2E0', // 设置名称字体颜色
          fontSize: 14, // 设置名称字体大小
          align: 'left',
          padding: [0, 0, 0, 6]
        },
        axisLabel: {
          color: '#7EB2E0', // 设置字体颜色
          fontSize: 14, // 设置字体大小
          formatter: '{value} %'
        },
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '服务事项数量',
        type: 'bar',
        barMaxWidth: 50,
        itemStyle: {
          //lenged文本
          color: function () {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0.5,
                  color: '#25D7DC' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'transparent' // 100% 处的颜色
                }
              ],
              false
            )
          }
        },
        data: numberList
      },
      {
        name: '服务事项数量占比',
        type: 'line',
        yAxisIndex: 1,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#3A84D6'
        },
        itemStyle: {
          color: '#FFF',
          borderColor: '#3A84D6',
          borderWidth: 3
        },
        data: percentList
      }
    ]
  }
}
const activeDetailTab = ref('01')
const changeDetailTab = (idx: string | number) => {
  activeDetailTab.value = `${idx}`
  initDetail()
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.tab-item {
  background: url(@/assets/ic_kuang.png);
  background-size: 100% 100%;
  height: 60px;
}
</style>
